<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script></script>
</head>

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li class="select">jQuery</li>
        <li>Vue.js</li>
    </ul>
    <ul>
        <div>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li class="select">jQuery</li>
            <li>Vue.js</li>
        </div>
    </ul>
    <button id="but">按钮</button>
    <button id="but1">创建</button>
</body>
<script>
    //1.分别使用filter实现带有class属性的文本（jQuery）变红
    //$("li").filter($(".select")).css("color","red");


    //替换元素
    //replaceWith()
    //把被选元素替换新的内容  HTML和存文本都可以
    // $("#but").click(function(){
    //     $(".select").replaceWith($("<li>JAVA</li>"));
    // })

    //replaceAll()  不能写纯文本，只能写HTML
    // $("#but").click(function(){
    //     $("<li>huhu</li>").replaceAll($(".select"))
    // })

    //包裹元素  
    //warp()  //使用指定的HTML标签来包裹每个被选中的元素
    // $("#but1").click(function(){
    //     var li = $("<li>JAVA</li>");
    //     $("body").append(li);
    // })

    // $("#but").click(function(){
    //     //$("li").wrap("<div></div>")   给选定的元素加上指定的HTML标签
    //     //$("li").wrapAll("<div></div>") 
    //     //$("li").wrapInner("<h2></h2>"); //给选定的元素的内容加上标签
    // })

    //过滤方法
    //hasClass()
    // $("#but").click(function(){
    //     console.log($("li").hasClass("select"));  //查看该元素是否有包含的类名 返回布尔值
    // })

    //eq()

    //is()
    // $("#but").click(function(){
    //     console.log( $(".select").parent().is("div")); //is()用于查看选择的元素是否匹配选择器 返回布尔值
    // })

    //反向过滤
    //not()
    // $("#but").click(function(){
    //    $("li").not(".select").css("color","red"); //not()返回不符合条件的元素 与 filter()相对
    // })

    //filter()
    //  $("#but").click(function(){
    //    $("li").filter(".select").css("color","red"); //not()返回符合条件的元素 
    // })

    //has()
    // $("#but").click(function () {
    //     $("ul").has("div").css("color","red"); //返回拥有指定选择器的元素，如果有多个用，隔开
    // })

    //查找父类元素
    //parent()  
    //parents() 查找所有的父级元素
    //parentsUntil()  查找到该元素，但不包含




</script>

</html>